html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

body {
  background-color: #222;
  width: 100%;
  height: 100vh;
}

@function getShadows($n) {
  $result: "#{random(100)}vw #{random(100)}vh 0 #fff";
  @for $i from 2 through $n {
    $result: "#{$result}, #{random(100)}vw #{random(100)}vh 0 #fff";
  }
  @return unquote($result);
}

.wrapper {
  .layer {
    position: fixed;
    left: 0;
    top: 0;
    border-radius: 50%;
    animation-name: moveUp;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    // 采用一个一样的伪元素，防止向上运动时下方空白；
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 100vh;
      width: inherit;
      height: inherit;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }

  $duration: 400s;
  $n: 1000;
  @for $i from 1 through 5 {
    .layer#{$i} {
      // 产生近大远小，近快远慢的视差效果；
      $duration: calc($duration / 2);
      $size: #{$i}px;
      $n: floor(calc($n / 2));
      width: $size;
      height: $size;
      box-shadow: getShadows($n);
      animation-duration: $duration;
    }
  }
}
@keyframes moveUp {
  to {
    transform: translateY(-100vh);
  }
}
